import React from 'react';
import ReactDOM from 'react-dom';

import { Router, Route, Link } from 'react-router'

import './index.scss';

class Hour extends React.Component {
	render(){
		return (
			<li className="hour"><span>{this.props.hour}</span></li>
		)
	}
}

class Clock extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			date: '',
			h: '',
			m: '',
			s: '',
		};

		setInterval(()=>{
			this.getTime()
		},1000)

	}

	componentDidMount (){
		this.getTime()
	}

	getTime(){
		let _date = new Date();
		let _hour = _date.getHours(),
			_minute = _date.getMinutes(),
			_second = _date.getSeconds();

		_hour = _hour > 10 ? _hour : '0'+_hour;
		_minute = _minute > 10 ? _minute : '0'+_minute;
		_second = _second > 10 ? _second : '0'+_second;

		this.setState({
			date: `${_date.toLocaleDateString()} : ${_hour} : ${_minute} : ${_second}`,
			h: _hour,
			m: _minute,
			s: _second,
		})
	}


	render(){
		let hours = [];

		const _s = 60, _m = 60, _h=12, _deg=360;
		for(var i=1; i<= 12; i++){
			hours.push(<Hour key={i} hour={i}/>)
		}
		return( 
			<div className={ `${this.props.fixed ? "fixed" : "absolute" } clock unselect ` }>
				<div className="clock-wrap">
					<div className="clock-item">
						<ul>
							{ hours }
						</ul>
					</div>
					<div className="clock-pointer">
						<div className="pointer-hour" style={{ transform: `rotate( ${parseInt(this.state.h / _h * _deg )}deg )` }}></div>
						<div className="pointer-minute" style={{ transform: `rotate( ${parseInt(this.state.m / _m * _deg )}deg )` }}></div>
						<div className="pointer-second" style={{ transform: `rotate( ${parseInt(this.state.s / _s * _deg )}deg )` }}></div>
					</div>
				</div>
				<div className="mt-15">{ this.state.date }</div>

			</div>

		);
	}
}

// ========================================

// ReactDOM.render(
// 	<Clock />,
// 	document.getElementById('root')
// );

export default Clock;